<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		1. 创建项目
		2. 需要ajax---->axios
		   先安装：npm i axios
		   
		   客户端：http://localhost:8080/#/ 
		   服务器：http://backend-api-01.newbee.ltd/api/v1/index-infos
		   
		   按照正常情况下： 我们是拿不到数据的，需要跨域
		   
		   需要配置跨域---》vue.config.js文件
		   module.exports={
		   	devServer:{
		   		proxy:{
		   			"/api":{
		   				target:"http://backend-api-01.newbee.ltd",
		   				ws:true,
		   				changeOrigin:true
		   			}
		   		}
		   	}
		   }
		   
		   main.js
		   
		   import axios from 'axios';
		   //完整 http://backend-api-01.newbee.ltd/api/v1/index-infos
		   axios.get("/api/v1/index-infos").then(data=>{
		   	console.log(data);
		   }).catch(err=>{
		   	console.log(err);
		   })
		   
		   
		   创建专门的文件夹（src目录里面---api文件），发送ajax
		   
		   http.js---->axios二次封装文件
		   index.js---->发送ajax文件
		   
		   使用 index.js 文件封装的请求方法
		   
		   1. mian.js 主入口js文件中导入，挂载到 Vue.prototype身上，供所有页面使用
		   
		   import http from "./api/index.js"//把封装的请求函数都要导入
		   Vue.prototype.$http=http;
		   
		   页面使用：  通过this.$http.XXX  使用
		    created(){
		   	  this.$http.getHomeData().then(data=>{
		   		   console.log(data);
		   	  }).catch(err=>{
		   		   console.log(err);
		   	  })
		   }
		   
		   2. 直接导入到各个组件中，使用
		   import http from "../api/index.js"
		   export default {
		     name: 'About',
		     created(){
				 http.getHomeData().then(data=>{
					 console.log(data);
				 }) 
		     }
		   }
		   
		3. vant 的使用   
		https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart
		
		3.1 安装
		npm i vant@latest-v2 -S
		
		3.2 使用
		1. 全部导入------main.js
		
		import Vant from 'vant';
		import 'vant/lib/index.css';
		
		Vue.use(Vant);
		
	    组件如何使用： 直接使用就可以   
	    <van-button type="primary">主要按钮</van-button>
		
		2. 按需导入（全局和按需会相互重冲突）
		下载插件  npm i babel-plugin-import -D
		
		配置 babel.config.js 文件
		
		module.exports = {
		  presets: [
		    '@vue/cli-plugin-babel/preset'
		  ],
		  plugins: [
		      ['import', {
		        libraryName: 'vant',
		        libraryDirectory: 'es',
		        style: true
		      }, 'vant']
		    ]
		}
		
		组件如何使用： 
		1. 首先在 main.js 导入后，use一下
		import { Button } from 'vant';
		Vue.use(Button);
		
		2. 组件中直接使用
		<van-button type="primary">主要按钮</van-button>
		
		
		Rem 布局适配：
		
		安装  npm i postcss-pxtorem@5.1.1 -D
		      npm i -S amfe-flexible
			  
	    配置：postcss.config.js
		
		module.exports = {
		  plugins: {
		    'postcss-pxtorem': {
		      rootValue: 37.5,
		      propList: ['*'],
		    },
		  },
		};
		
	    在main.js 中引入文件  import 'amfe-flexible/index.min.js'
	</body>
</html>
